<template>
  <div class="home">
    <div class='home-header'>Welcome to ZPlayer </div>
    <div class='home-menu'>
      <el-menu theme='dark' :default-active="defaultActive" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click='getContent(1)'><i class="el-icon-menu"></i>推荐歌单</el-menu-item>
        <el-menu-item index="6" @click='getContent(6)'><i class="el-icon-document"></i>新歌推荐</el-menu-item>
        <el-menu-item index="2" @click='getContent(2)'><i class="el-icon-picture"></i>新歌榜</el-menu-item>
        <el-menu-item index="3" @click='getContent(3)'><i class="el-icon-time"></i>热歌榜</el-menu-item>
        <el-menu-item index="4" @click='getContent(4)'><i class="el-icon-date"></i>原创榜</el-menu-item>
        <el-menu-item index="5" @click='getContent(5)'><i class="el-icon-d-caret"></i>飙升榜</el-menu-item>
        <el-menu-item index="7" @click='goToSearch'><i class="el-icon-search"></i>搜歌曲</el-menu-item>
      </el-menu>
    </div>
    <div class='home-content'>
      <div class='recommended' v-if='recom'>
        <el-row :gutter="50">
          <el-col :span="12" v-for='songsLists in recommendedList'>
            <div class='recommended-list'>
              <div class='recom-img-box'><img :src='songsLists.picUrl' :title='songsLists.copywriter' @click='getSheet(songsLists.id, songsLists.picUrl, songsLists.name, songsLists.playCount, songsLists.trackCount, songsLists.copywriter)'></div>
              <h3>{{songsLists.name}}</h3>
              <dl>
                <span class='play-number'>收听人数：{{songsLists.playCount}}</span>
                <span class='song-number'>歌曲数量：{{songsLists.trackCount}}</span>
              </dl>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class='xgt' v-if='xgt'>
        <!--<el-row :gutter="50">
          <el-col :span="12" v-for='nslist in newSongList' class='new-song-list'>
            <div class="ns-li">
            </div>
          </el-col>
        </el-row>
        -->
        新歌暂时关闭
      </div>
      <div class='topSong typeOne' v-if='ts1'>
        <el-row :gutter="10" v-for='(songTop, index) in songTop1' class='tsl'>
          <el-col :span="1">{{index+1}}</el-col>
          <el-col :span="17">{{songTop.name}}</el-col>
          <el-col :span="4">{{songTop.artists[0].name}}</el-col>
          <el-col :span="2">
            <i class='iconfont icon-bofangqi3' @click='clickSong(songTop.id, songTop.album.picUrl, songTop.artists[0].name, songTop.name)'>
            </i>
          </el-col>
        </el-row>
      </div>
      <div class='topSong typeTwo' v-if='ts2'>
        <el-row :gutter="10" v-for='(songTop, index) in songTop2' class='tsl'>
          <el-col :span="1">{{index+1}}</el-col>
          <el-col :span="17">{{songTop.name}}</el-col>
          <el-col :span="4">{{songTop.artists[0].name}}</el-col>
          <el-col :span="2">
            <i class='iconfont icon-bofangqi3' @click='clickSong(songTop.id, songTop.album.picUrl, songTop.artists[0].name, songTop.name)'>
            </i>
          </el-col>
        </el-row>
      </div>
      <div class='topSong typeThree' v-if='ts3'>
        <el-row :gutter="10" v-for='(songTop, index) in songTop3' class='tsl'>
          <el-col :span="1">{{index+1}}</el-col>
          <el-col :span="17">{{songTop.name}}</el-col>
          <el-col :span="4">{{songTop.artists[0].name}}</el-col>
          <el-col :span="2">
            <i class='iconfont icon-bofangqi3' @click='clickSong(songTop.id, songTop.album.picUrl, songTop.artists[0].name, songTop.name)'>
            </i>
          </el-col>
        </el-row>
      </div>
      <div class='topSong typeFour' v-if='ts4'>
        <el-row :gutter="10" v-for='(songTop, index) in songTop4' class='tsl'>
          <el-col :span="1">{{index+1}}</el-col>
          <el-col :span="17">{{songTop.name}}</el-col>
          <el-col :span="4">{{songTop.artists[0].name}}</el-col>
          <el-col :span="2">
            <i class='iconfont icon-bofangqi3' @click='clickSong(songTop.id, songTop.album.picUrl, songTop.artists[0].name, songTop.name)'>
            </i>
          </el-col>
        </el-row>
      </div>
      <div class='sheet-box' v-if='isSheet'>
        <div class='sheet-info'>
          <div class='sheet-pic'>
            <img :src='sheetInfo.picUrl'>
          </div>
          <div class='sheet-info-r'>
            <h3>歌单：{{sheetInfo.name}}</h3>
            <p>介绍：{{sheetInfo.copywriter}}</p>
            <p>歌曲列表：<span>{{sheetInfo.trackCount}}首歌</span></p>
            <p>播放次数：{{sheetInfo.playCount}}</p>
            <el-button @click='allSongsPlaying(sheetList)' class='playAll'>全部播放</el-button>
          </div>
        </div>
        <el-row :gutter="10" v-for='(shtSong, index) in sheetList' class='tsl'>
          <el-col :span="1">{{index+1}}</el-col>
          <el-col :span="17">{{shtSong.name}}</el-col>
          <el-col :span="4">{{shtSong.al.name}}</el-col>
          <el-col :span="2">
            <i class='iconfont icon-bofangqi3' @click='clickSong(shtSong.id, shtSong.al.picUrl, shtSong.al.name, shtSong.name)'>
            </i>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  import VueZplayer from './ZPlayer'
  export default {
    name: 'home',
    data () {
      return {
        isSheet: false,
        recom: false,
        ts1: false,
        ts2: false,
        ts3: false,
        ts4: false,
        xgt: false,
        defaultActive: '1',
        flag: false,
        recommendedList: [], // 歌单推荐
        newSongList: [], // 新歌推荐
        songTop1: [], // 排行榜1
        songTop2: [], // 排行榜2
        songTop3: [], // 排行榜3
        songTop4: [], // 排行榜4
        sheetList: [], // 歌单详情
        sheetInfo: {} // 歌单信息
      }
    },
    components: {
      'zplayer': VueZplayer
    },
    created () {
      let cache = JSON.parse(localStorage.getItem('cacheSongList'))
      if (!cache || cache.length === 0) {
        console.log('缓存中无歌曲')
      } else {
        this.newSongList = cache
      }
    },
    mounted () {
      this.getContent(1)
    },
    methods: {
      clickSong (id, pic, artistsName, songName) {
        var _this = this
        // 歌曲url获取
        this.$http.get('/music/url?id=' + id).then(function (response) {
          // 创建obj对象，之后将obj添加至songlist歌单
          let obj = {id: id, url: response.data.data[0].url, pic: pic, author: artistsName, title: songName}
          _this.newSongList.push(obj)
          // 子组件对父组件传值
          _this.$emit('childrenSongChanged', obj)
          // 在这里加入缓存
          if (localStorage) {
            localStorage.setItem('cacheSongList', JSON.stringify(_this.newSongList))
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      getContent (index) {
        let _this = this
        this.setAllHide()
        if (index === 1) {
          // 推荐歌单
          this.$http.get('/personalized').then(function (response) {
            _this.recommendedList = response.data.result
            _this.recom = true
          }).catch(function (error) {
            console.log(error)
          })
        } else if (index === 2) {
          // 排行榜1
          this.$http.get('/top/list?idx=0').then(function (response) {
            _this.songTop1 = response.data.result.tracks
            _this.ts1 = true
          }).catch(function (error) {
            console.log(error)
          })
        } else if (index === 3) {
          // 排行榜2
          this.$http.get('/top/list?idx=1').then(function (response) {
            _this.songTop2 = response.data.result.tracks
            _this.ts2 = true
          }).catch(function (error) {
            console.log(error)
          })
        } else if (index === 4) {
          // 排行榜3
          this.$http.get('/top/list?idx=2').then(function (response) {
            _this.songTop3 = response.data.result.tracks
            _this.ts3 = true
          }).catch(function (error) {
            console.log(error)
          })
        } else if (index === 5) {
          // 排行榜4
          this.$http.get('/top/list?idx=3').then(function (response) {
            _this.songTop4 = response.data.result.tracks
            _this.ts4 = true
          }).catch(function (error) {
            console.log(error)
          })
        } else if (index === 6) {
          // 新歌推荐
          this.$http.get('/dj/recommend').then(function (response) {
            _this.newSongList = response.data.result
            _this.xgt = true
            console.log(_this.newSongList)
          }).catch(function (error) {
            console.log(error)
          })
        }
      },
      goToSearch () {
        this.$router.push('/search')
      },
      getSheet (id, picUrl, name, playCount, trackCount, copywriter) {
        // 歌单详细sheetList
        let _this = this
        this.sheetInfo.id = id
        this.sheetInfo.picUrl = picUrl
        this.sheetInfo.name = name
        this.sheetInfo.playCount = playCount
        this.sheetInfo.trackCount = trackCount
        this.sheetInfo.copywriter = copywriter
        this.$http.get('/playlist/detail?id=' + id).then(function (response) {
          _this.sheetList = response.data.playlist.tracks
          _this.setAllHide()
          _this.isSheet = true
          console.log(response.data.playlist)
        }).catch(function (error) {
          console.log(error)
        })
      },
      setAllHide () {
        this.recom = false
        this.ts1 = false
        this.ts2 = false
        this.ts3 = false
        this.ts4 = false
        this.xgt = false
        this.isSheet = false
      },
      allSongsPlaying (allSongs) {
        // 这里会进行大量的计算，比较慢
        let _this = this
        allSongs.forEach(function (el, index) {
          let obj = {
            id: el.id,
            url: '',
            pic: el.al.picUrl,
            author: el.al.name,
            title: el.name
          }
          _this.$http.get('/music/url?id=' + el.id).then(function (response) {
            obj.url = response.data.data[0].url
            _this.newSongList.push(obj)
            // 子组件对父组件传值
            _this.$emit('childrenSongChanged', obj)
            // 在这里加入缓存
            if (localStorage) {
              localStorage.setItem('cacheSongList', JSON.stringify(_this.newSongList))
            }
          }).catch(function (error) {
            console.log(error)
          })
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../assets/fonts/iconfont.css';
.home{
  position:relative;
  width:100%;
  height:100%;
}
.home-header{
  font-size:20px;
  color:#ccc;
  text-align:left;
  line-height:50px;
  padding:0 10px;
}
.home-menu{
  position:absolute;
  left:0;
  top:50px;
  bottom:0;
  width:200px;
  background:rgba(0,200,255,0.05);
  -webkit-box-shadow: 0 0 5px rgba(0,200,255,0.95);
  box-shadow: 0 0 5px rgba(0,200,255,0.95);
}
.home-content{
  position:absolute;
  right:0;
  left:220px;
  top:50px;
  bottom:0;
  padding:10px;
  background:rgba(0,200,255,0.05);
  -webkit-box-shadow: 0 0 5px rgba(0,200,255,0.95);
  box-shadow: 0 0 5px rgba(0,200,255,0.95);
  overflow-x:hidden;
  overflow-y:auto;
}
.recommended{
  margin:0 15% 0;
}
.recommended-list{
  width:100%;
  height:100%;
  position:relative;
  margin:45px 0;
}
.recom-img-box{
  overflow:hidden;
}
.recommended-list img{
  display:block;
  width:100%;
  height:100%;
  opacity:0.75;
  -webkit-transition: all 2000ms;
  transition: all 2000ms;
  cursor:pointer;
}
.recommended-list img:hover{
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  opacity:1;
}
.recommended-list h3{
  font-size:14px;
  height:25px;
  overflow:hidden;
  line-height:25px;
  font-weight:normal;
  margin:10px auto 0;
  color:#eee;
}
.recommended-list dl{
  position:absolute;
  background:rgba(0,0,0,0.5);
  color:#ddd;
  bottom:35px;
  left:0;
  right:0;
  overflow:hidden;
  line-height:35px;
  font-size:10px;
  padding:0 10px;
}
.recommended-list span{
  display:inline-block;
}
.play-number{float:left;}
.song-number{float:right;}
.topTypeOne{
}
.topSong{
  color:#ccc;
  padding:0 25px 0;
  font-size:14px;
  line-height:30px;
  text-align:center;
}
.tsl{
  line-height:30px;
  height:30px;
  overflow:hidden;
}
.tsl:nth-child(2n){
  background:rgba(0,200,255,0.05);
}
.tsl i.iconfont{
  cursor:pointer;
  display:block;
}
.tsl i.iconfont:hover{
  color:rgb(0,200,255)
}
.el-menu.el-menu-vertical-demo.el-menu--dark{
  background:none;
}
.xgt{
  color:#ccc;
}
.heet-box{}
.sheet-info{
  overflow:hidden;
  color:#ccc;
  padding:0 0 15px;
  margin:0 0 15px;
  border-bottom:1px solid #ccc;
}
.sheet-pic{
  width:20%;
  border:1px solid rgba(0,200,255,0.6);
  padding:5px;
  float:left;
}
.sheet-pic img{
  width:100%;
  display:block;
}
.sheet-info-r{
  float:left;
  margin-left:20px;
}
.sheet-info-r h3{
  padding:0 0 10px;
}
.sheet-info-r p{
  margin:5px 0 0;
  font-size:12px;
}
.sheet-box .tsl{
  color:#ccc;
}
.sheet-box .tsl i.iconfont{
  margin:0 auto 0;
}
.playAll{
  margin:10px 0 0;
}
</style>
